什麼是 useRef？

useRef 是 React 提供的內建 Hooks 之一，它用於創建一個稱為 ref 的物件，這個 ref 可以用來儲存和訪問在多次渲染之間需要保留的資料。useRef 在操作 DOM 元素、處理焦點、保存前一個狀態等方面非常有用。

使用 useRef 選擇和操作 DOM 元素

useRef 的一個主要用途是選擇和操作 DOM 元素。以下是一個範例，展示了如何使用 useRef 選擇一個輸入框元素並自動聚焦：

function App() {
  const inputEl = useRef(null);

  useEffect(() => {
    // 使用 inputEl.current 來訪問 DOM 元素
    inputEl.current.focus();
  }, []);

  return (
    <input ref={inputEl} />
  );
}

在上面的程式碼範例中，我們使用 useRef 創建了一個名為 inputEl 的 ref，並將其設置為 input 元素的 ref。我們可以在 useEffect 中使用 inputEl.current 來訪問和操作這個 DOM 元素。

實現按 Enter 鍵自動聚焦並清空輸入框

現在，讓我們進一步改進我們的範例，實現一個按 Enter 鍵自動聚焦輸入框並清空輸入內容的功能。

function App() {
  const inputEl = useRef(null);
  const [query, setQuery] = useState('');

  useEffect(() => {
    const handleKeyPress = (e) => {
      if (e.code === "Enter") {
        inputEl.current.focus();
		setQuery('');
      }
    };

	// 副作用
    document.addEventListener('keydown', handleKeyPress);

	// Cleanup Function 清除副作用
    return () => {
      document.removeEventListener('keydown', handleKeyPress);
    };
  }, [query]);

  return (
    <input
      ref={inputElement}
      value={query}
      onChange={(e) => setQuery(e.target.value)}
    />
  );
}

在這個示例中，我們使用 useRef 創建了一個 inputEl 的 ref，並且使用 useState 來管理輸入框的值。我們使用 useEffect 監聽全局的 keydown 事件，並且檢查按下的鍵是否是 Enter 鍵。

useRef 注意事項

• useRef 可以幫助我們選擇和操作 DOM 元素，以及儲存需要在多次渲染之間保留的資料。
• useRef 創建的 ref 物件的 current 屬性是可變的，但不會觸發元件重新渲染。
• 請確保在 useEffect 中訪問和操作 DOM 元素。
• useRef 可以用於各種場景，包括輸入框自動聚焦、儲存 DOM 元素引用和處理特定的交互功能。

useRef 和 useState的比較

useRef 和 useState 有一些相似之處，但也有一些重要的區別：

相似之處：

1. 二者都可以在多次渲染之間保留資料狀態。

不同之處：

1. 更新狀態（使用 useState）會觸發元件重新渲染，而更新 ref（使用 useRef）則不會。
2. 狀態是不可變的，而 ref 是可變的。
3. 狀態更新是非同步的，而 ref 的更新是同步的，可以立即讀取新的 current 值。

結語

useRef 可用於保存狀態和操作 DOM 元素，藉助 useRef，可以更輕鬆地處理需要在多次渲染之間保留的資料，同時也可以更輕鬆地操作 DOM 元素。

這邊要特別注意，ref 通常用於不會直接影響元件的畫面顯示，如果資料需要參與元件的顯示，那麼應該使用狀態而不是 ref。